<HTML>


<HEAD><TITLE>Date Range Constraint Demo</TITLE>


</HEAD>


<BODY bgcolor="#dcdcdc">


<style type="text/css">


.plain {height:20px; vertical-align:middle;}


</style>








<BR>


An excellent example to show you how simple it is to use the dynamical date range constraint.<BR><BR>





<UL>NOTE:


<LI>You won't be able to start after the end-date or end before the start-date.


<LI>2 additional plugin functions are defined in plugins.js in order to support the range checking.


<LI>The input boxes are made readonly in this demo, by setting "readonly onfocus='this.blur()'".


</UL>


<BR><BR>








<FORM name="demoform" onsubmit="alert('form submit');">


<table width=600>


<tr>


	<td>


Start Date: <input class="plain" name="dc1" value="" size="12" onfocus="this.blur()" readonly><a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fStartPop(document.demoform.dc1,document.demoform.dc2);return false;" HIDEFOCUS><img name="popcal" align="absmiddle" src="calbtn.gif" width="34" height="22" border="0" alt=""></a>


	</td>


	<td>


End Date: <input class="plain" name="dc2" value="" size="12" onfocus="this.blur()" readonly><a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fEndPop(document.demoform.dc1,document.demoform.dc2);return false;" HIDEFOCUS><img name="popcal" align="absmiddle" src="calbtn.gif" width="34" height="22" border="0" alt=""></a>


	</td>


</tr>


</table>


</FORM>














  <hr size="1">


  <div align="right"><font size=-2><em>Copyright&copy; 2003-2004 Idemfactor Solutions,


    Inc. All rights reserved.</em></font></div>











<!--  PopCalendar(tag name and id must match) Tags should sit at the page bottom -->


<iframe width=132 height=142 name="gToday:contrast:agenda.js" id="gToday:contrast:agenda.js" src="ipopeng.htm" scrolling="no" frameborder="0" style="visibility:visible; z-index:999; position:absolute; left:-500px; top:0px;">


</iframe>


</BODY>


</HTML>





